<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vue中的样式绑定</title>
	<script src="vue.js"></script>
	<style>
		.activated{
			color: red;
		}
	</style>
</head>
<body>
	
	<!-- 第一种方法 class -->
	<div id="root">
		<!-- class 的对象绑定 -->
		<div @click="handleDivClick" 
			v-bind:class="{activated: isActivated}"
		>hello world</div>
	</div>
	<script>
		var vm = new Vue({
			el: '#root',
			data:{
				isActivated: false
			},
			methods:{
				handleDivClick: function() {
					this.isActivated = !this.isActivated
				}
			},
			computed:{

			}
		})
	</script>

	
	<!-- 第二种方法 class -->
	<div id="root1">
		<div @click="handleDivClick" :class="[activated, activatedOne]">hello world</div>
	</div>
	<script>
		var vm1 = new Vue({
			el: '#root1',
			data: {
				activated: '',
				activatedOne: 'activated-one'
			},
			methods: {
				handleDivClick: function(){
					this.activated = this.activated === 'activated' ? '':'activated'
				}
			}
		})
	</script>

	<!-- 第三种方法 style 对象 -->
	<div id="root2">
		<div :style="styleObj" @click="handleDivClick">
			hello world
		</div>
	</div>
	<script>
		var vm2 = new Vue({
			el: '#root2',
			data: {
				styleObj: {
					color: 'black'
				}
			},
			methods: {
				handleDivClick: function() {
					this.styleObj.color = this.styleObj.color === 'black' ? 'red' : 'black';
				}
			}
		})
	</script>


	<!-- 第三种方法 style 数组 -->
	<div id="root3">
		<div :style="[styleObj,{fontSize: '20px'}]" @click="handleDivClick">
			hello world
		</div>
	</div>
	<script> 
		var vm2 = new Vue({
			el: '#root3',
			data: {
				styleObj: {
					color: 'black'
				}
			},
			methods: {
				handleDivClick: function() {
					this.styleObj.color = this.styleObj.color === 'black' ? 'red' : 'black';
				}
			}
		})
	</script>


</body>
</html>